(function(){
    const oContainer = document.querySelector('.carousel')
    const oImgBox = oContainer.querySelector('.imgs')
    const oPrev= oContainer.querySelector('.prev')
    const oNext= oContainer.querySelector('.next')
    const aImgs= oContainer.querySelectorAll('.imgs-wrap')
    const moveTimes = aImgs.length - 3//能翻页的次数

    let currTime =0;
    changeBtn()
    oPrev.onclick = oNext.onclick = function(){
        if(this==oPrev){
            if(currTime>0){
                currTime--
                changeImg()
            }
        }else{
            if(currTime<moveTimes){
                currTime++
                changeImg()
            }
        }
        console.log(currTime);
    }
    function changeImg(){
        oImgBox.style.left = -((aImgs[0].offsetWidth + 30)*currTime)+'px'
        changeBtn()
    }
    function changeBtn(){
        if(currTime<=0){
            oPrev.classList.add('invalid')
        }else{
            oPrev.classList.remove('invalid')
        }



        if(currTime>=moveTimes){
            oNext.classList.add('invalid')
        }else{
            oNext.classList.remove('invalid')
        }
    }

    let timer
    function go(){
        timer = setInterval(()=>{
            if(currTime==moveTimes){
                currTime=-1
            }
        oNext.onclick()
        },2000);
    }

    go()
    oContainer.onmouseover =function(){
        clearInterval(timer)
    }
    oContainer.onmouseout = function(){
        go()
    }
})()
    

